import "./moreipvideo.css"
import React, { useRef } from "react"
import Navbar from "../../components/navbar/navbar"
import { Link, useNavigate } from "react-router-dom"
import { getAllVideo, getHealthVideo, getFoodVideo, getOffspringVideo } from "../../api/home"
import { InfiniteScroll, List } from 'antd-mobile'

function Moreipvideo() {
    let navigate = useNavigate();//链接跳转
    let [indexs, editIndex] = React.useState(1);
    let [allvideo, setAllvideo] = React.useState(null);
    let [healthvideo, setHealthvideo] = React.useState(null);
    let [foodvideo, setFoodvideo] = React.useState(null);
    let [offspringVideo, setOffspringVideo] = React.useState(null);

    const pageView = useRef(null);

    // 加载
    let [Num, editNum] = React.useState(10)
    let [flag, Editflag] = React.useState(false)
    let [page, setPage] = React.useState(null)

    let [tab, Tabers] = React.useState([
        {
            id: 1,
            name: '推荐'
        },
        {
            id: 2,
            name: '美食IP'
        },
        {
            id: 3,
            name: '健康IP'
        },
        {
            id: 4,
            name: '亲子IP'
        }
    ])
    //请求数据 

    React.useEffect(() => {
        // 全部
        getAllVideo(Num).then(data => {
            // console.log(data.data.data);
            setAllvideo(data.data.data)
            // console.log(data.data.total);
            setPage(data.data.total)

        })

    }, [])

    const editTab = (id) => {
        Editflag(false);
        pageView.current.scrollTop = 0;

        editIndex(id);
        editNum(10);
        if (id == 2) {
            //美食IP

            getFoodVideo(Num).then(data => {
                // console.log(data.data.data);
                setFoodvideo(data.data.data)
                setPage(data.data.total)

            })
        } else if (id == 3) {
            //健康IP

            getHealthVideo(Num).then(data => {
                // console.log(data.data.data);
                setHealthvideo(data.data.data)
                setPage(data.data.total)

            })

        } else if (id == 4) {
            //亲子IP

            getOffspringVideo(Num).then(data => {
                // console.log(data.data.data);
                setOffspringVideo(data.data.data)
                setPage(data.data.total)

            })
        }



    }

    return (
        <div className="moreipvideo" ref={pageView} style={{ height: '100vh', overflow: "scroll" }}>
            {/* 顶部 */}
            <div className="top" >
                <div></div>
                <div className="tabs">
                    <ul>
                        {
                            tab.map(item => {
                                return (
                                    <li key={item.id} className={indexs == item.id ? "active" : ""} onClick={editTab.bind(this, item.id)}>{item.name}</li>
                                )
                            })
                        }

                        {/* <li onClick={() => { editIndex(2); editNum(10); Editflag(false); }} className={indexs == 2 ? "active" : ""} >美食IP</li>
                        <li onClick={() => { editIndex(3); editNum(10); Editflag(false); }} className={indexs == 3 ? "active" : ""} >健康IP</li>
                        <li onClick={() => { editIndex(4); editNum(10); Editflag(false); }} className={indexs == 4 ? "active" : ""} >亲子IP</li> */}
                    </ul>
                </div>
                <i className="iconfont icon-sort"></i>
            </div>

            {/* 分类内容 全部*/}
            <div className={indexs == 1 ? 'recommend' : 'display'}>
                <ul>
                    {
                        allvideo && allvideo.map(item => {
                            return (
                                <li key={item.series_id}>
                                     <Link to={"/detailscourse/" + item.series_id}>
                                    <div className="img">
                                        <img src={item.course_image} />
                                    </div>
                                    <div className="detail">
                                        <span className="title">{item.course_name}</span>
                                        <div className="img">
                                            <img src={item.series_logo} />
                                        </div>
                                        <div className="album">
                                            <span>更新至{item.episode_sum}集</span>
                                            <span>上课人数：{item.play}</span>
                                            <span className="name text_row_hidden">{item.series_name}</span>
                                        </div>
                                    </div>
                                    </Link>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>

            {/* 分类内容 美食IP*/}
            <div className={indexs == 2 ? 'recommend' : 'display'}>
                <ul>
                    {
                        foodvideo && foodvideo.map(item => {
                            return (
                                <li key={item.series_id}>
                                    <Link to={"/detailscourse/" + item.series_id}>
                                    <div className="img">
                                        <img src={item.image} />
                                    </div>
                                    <div className="detail">
                                        <span className="title">{item.series_name}</span>
                                        <div className="img">
                                            <img src={item.album_logo} />
                                        </div>
                                        <div className="album">
                                            <span>更新至{item.episode_sum}集</span>
                                            <span>上课人数：{item.play}</span>
                                            <span className="name text_row_hidden">{item.album}</span>
                                        </div>
                                    </div>
                                    </Link>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>

            {/* 分类内容 健康IP*/}
            <div className={indexs == 3 ? 'recommend' : 'display'}>
                <ul>
                    {
                        healthvideo && healthvideo.map(item => {
                            return (
                                <li key={item.series_id}>
                                    <Link to={"/detailscourse/" + item.series_id}>
                                    <div className="img">
                                        <img src={item.image} />
                                    </div>
                                    <div className="detail">
                                        <span className="title">{item.series_name}</span>
                                        <div className="img">
                                            <img src={item.album_logo} />
                                        </div>
                                        <div className="album">
                                            <span>更新至{item.episode_sum}集</span>
                                            <span>上课人数：{item.play}</span>
                                            <span className="name text_row_hidden">{item.album}</span>
                                        </div>
                                    </div>
                                    </Link>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>

            {/* 分类内容 亲子IP*/}
            <div className={indexs == 4 ? 'recommend' : 'display'}>
                <ul>
                    {
                        offspringVideo && offspringVideo.map(item => {
                            return (
                                <li key={item.series_id}>
                                    <Link to={"/detailscourse/" + item.series_id}>
                                    <div className="img">
                                        <img src={item.image} />
                                    </div>
                                    <div className="detail">
                                        <span className="title">{item.series_name}</span>
                                        <div className="img">
                                            <img src={item.album_logo} />
                                        </div>
                                        <div className="album">
                                            <span>更新至{item.episode_sum}集</span>
                                            <span>上课人数：{item.play}</span>
                                            <span className="name text_row_hidden">{item.album}</span>
                                        </div>
                                    </div>
                                    </Link>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>

            <InfiniteScroll loadMore={async () => {
                setTimeout(() => {
                    Editflag(true)

                }, 2000)
                // console.log(flag);
                Num += 2
                editNum(Num)
                // console.log(Num);
                if (indexs == 1) {
                    await getAllVideo(Num).then(data => {
                        setAllvideo(data.data.data)
                        console.log(data.data.total);
                    })
                } else if (indexs == 2) {
                    getFoodVideo(Num).then(data => {
                        // console.log(data.data.data);
                        setFoodvideo(data.data.data)

                    })
                } else if (indexs == 4) {
                    getOffspringVideo(Num).then(data => {
                        // console.log(data.data.data);
                        setOffspringVideo(data.data.data)

                    })
                } else if (indexs == 3) {
                    getHealthVideo(Num).then(data => {
                        // console.log(data.data.data);
                        setHealthvideo(data.data.data)

                    })
                }

                setTimeout(() => {
                    Editflag(false)

                }, 2000)


            }} hasMore={flag == false && Num < page}
                threshold={300}
            />
            {/* 底部导航 */}
            <Navbar index="2" />

        </div>
    )

}

export default Moreipvideo;